<template>
    <div class="main">
        <div class="main-header flex jus-b" v-if="buttons.length">
            <div>
                <el-button v-if="findButton('添加')" type="primary" @click="addShow=true">添加请款单</el-button>
                <el-button type="danger" v-if="findButton('删除')" @click="deleteProgram" :disabled="!selection.length">删除</el-button>
            </div>
        </div>
        <el-table :data="list" border header-cell-class-name="main-table-header" ref="table" class="main-table"
            height="100%" row-key="id" default-expand-all @selection-change="onSelectionChange" @row-click="onRowClick">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column width="70px" label="ID" prop="id"></el-table-column>
            <el-table-column width="120px" label="审核结果">
                <template slot-scope="{row}">
                    <el-tag :type="row.status==0?'info':row.status==1?'success':row.status==2?'danger':''">
                        {{  row.status==0?'待审核':row.status==1?'已同意':row.status==2?'已拒绝':'' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column width="180px" label="项目名称" prop="project__project_name"></el-table-column>
            <el-table-column width="100px" label="申请人" prop="username"></el-table-column>
            <el-table-column width="100px" label="申请金额" prop="payout_money">
                <template slot-scope="{row}">
                    ¥{{ row.payout_money }}
                </template>
            </el-table-column>
            <el-table-column width="120px" label="请款标题" prop="title"></el-table-column>
            <el-table-column width="150px" label="附件" prop="payout_attachment">
                <template slot-scope="{row}">
                    <el-link>{{ row.payout_attachment }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="申请理由" prop="desc" width="300px"></el-table-column>
            <el-table-column fixed="right" label="操作" width="320px">
                <template slot-scope="{row}">
                    <el-button v-if="row.status==1" @click.stop="seeInvoice(row)">查看打款凭证</el-button>
                    <el-button v-if="row.status==2" @click.stop="seeReason(row)">查看拒绝原因</el-button>
                    <el-button type="danger" :disabled="row.status!=0" v-if="findButton('编辑')"
                        @click.stop="editValue = row">编辑</el-button>
                    <el-button type="primary" :disabled="row.status!=0" v-if="findButton('审核')" @click.stop="examineValue = row">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
            @current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>

        <!-- 添加请款单 -->
        <addPayout v-model="addShow" :editRow.sync="editValue" @update="getList"></addPayout>
        <!-- 审核 -->
        <examine v-model="examineValue" @update="getList"></examine>
    </div>
</template>
<script>
import addPayout from './add.vue'
import examine from './examine.vue'
export default {
    data() {
        return {
            addShow: false,//添加
            editValue:null,//编辑
            examineValue:null,//审核
            list: [],
            selection: [],
            project_type_list: [],
            total: 0,
            limit: 20,
            page: 1,
            searchParam: {

            },
            searchParamOrigin: {}
        }
    },
    components:{
        addPayout,examine
    },
    created() {
        this.getList()
    },
    methods: {
        search() {
            this.searchParam = { ...this.searchParamOrigin }
            this.getList()
        },
        resetSearch() {
            this.searchParam = this.$options.data().searchParam
            this.searchParamOrigin = this.$options.data().searchParam
        },
        async getList() {
            let res = await this.$get({
                url: "/admin/finance.ProjectPayout/index",
                loading: true,
                params: {
                    page:this.page,
                    limit:20,
                    ...this.searchParam,
                    search_time: this.searchParam.search_time ? this.searchParam.search_time.join(' - ') : ''
                }
            })
            this.total = res.total
            this.list = res.list
        },
        seeInvoice(row){
            this.$preview(row.pay_invoice)
        },
        seeReason(row){
            this.$confirm(row.refuse_reason,'拒绝原因').catch(()=>{
                return
            })
        },
        deleteProgram() {
            this.$confirm(
                `此操作将永久删除该${this.selection.length}个请款单, 是否继续?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            )
                .then(async () => {
                    let query = "?";
                    for (let i = 0; i < this.selection.length; i++) {
                        const item = this.selection[i];
                        if (i > 0) {
                            query += "&ids[]=" + item.id;
                        } else {
                            query += "ids[]=" + item.id;
                        }
                    }
                    await this.$del({
                        url: "/admin/finance.ProjectPayout/del" + query,
                        successTip: true,
                        loading: true
                    });
                    this.getList();
                })
                .catch(() => {
                    this.$refs.table.clearSelection();
                });
        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onCurrentChange(index) {
            this.page = index;
            this.getList()
        },
        tapButton(e) {
            switch (e.name) {
                case 'add':
                    this.$router.push('/addprogram')
                    break;
                case 'delete':
                    this.deleteProgram()
                    break;
                default:
                    console.log('default')
                    break;
            }
        },
    }
}
</script>
<style lang="less"></style>